<!-- 
  点击头像 显示的浮动菜单
 -->
<template>
<div class="haBox">
    <section class="haBox_box">
        <img src="@/assets/img/icon_close.svg" class="close" @click="hideInfoBox" v-if="isMobile"/>
        <!-- 登录前 -->
        <div class="con" v-if="!userInfo">
            <div class="imgBox">
                <img src="@/assets/img/icon_default_avatar.svg" alt="" class="img">
            </div>
            <span class="txt">{{$t("float-menu-no-login")}}</span>
            <span class="btn btn-bg hand" @click="go2Login">{{$t("float-menu-login")}}</span>
            <span class="btn hand" @click="go2Reg">{{$t("float-menu-reg")}}</span>
        </div>
        <!-- 登录后 -->
        <div class="con hand" v-else>
            <div class="imgBox" @click="go2Member">
                <img :src="userInfo.avatar" alt="" class="img">
            </div>
            <span class="txt" @click="go2Member">{{userInfo.nickname}}</span>
            <span class="btn" @click.stop="logout"><img src="@/assets/img/icon_quit.svg" alt="" class="img">{{$t("float-menu-login-out")}}</span>
        </div>
    </section>
</div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        // 隐藏手机端的用户弹框
        hideInfoBox(){
            this.$store.commit('submitShowInfoBox', false)
        },
    }
}
</script>

<style lang="scss">
// 显示浮框
.haBox {
    $w: 230px;
    position: absolute;
    right:0;
    z-index: 10000;
    top: 20px;
    $color-bor: #ebebeb;
    width: $w;
    transition: all 0.2s linear;

    &_box {
        margin-top: 28px;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
        border-radius: 4px;

        .con {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .imgBox {
            $wh: 70px;
            width: $wh;
            height: $wh;
            margin-bottom: 20px;
            border-radius: 50%;
            overflow: hidden;

            .img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .txt {
            color: #191E33;
            font-size: 16px;
            margin-bottom: 30px;
        }

        .btn {
            $c: #D53B76;
            color: $c;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;

            .img {
                margin-right: 6px;
            }

            &-bg {
                width: 214px;
                height: 37px;
                background: $c;
                border-radius: 4px;
                color: #fff;
            }

            &:hover {
                opacity: 0.7;
            }
        }
        .close{
            position: absolute;
            top:40px;
            right:10px;
        }

    }

    // 顶部信息
    &_t {
        display: flex;
        align-items: center;
        flex-direction: column;

        .avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 16px;

            .img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .top {
            &_l {
                color: #fff;
                font-size: 14px;

                .avatar {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 16px;

                    .img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }

                &_t {
                    display: flex;
                    align-items: center;
                    position: relative;
                    padding: 10px;
                    width: 100%;

                    .line {
                        margin: 0 5px
                    }

                    .txt,
                    .line {
                        text-decoration: none;
                    }

                    &.jCenter {
                        justify-content: center;

                    }
                }
            }
        }
    }

    // 底部退出按钮
    &_b {
        border-top: solid 1px $color-bor;
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn {
            color: #2C74FE;
        }
    }
}
</style>
